<template>
  <div class="rate_setting">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <h5 class="err">注意：本费率为服务商与银行协议规定，请严格按照协议填写。</h5>
    <el-row>
      <div class="bb1 fz14" style="color:#324157;"><svg-icon icon-class="payChannel"></svg-icon> 支付通道及结算费率</div>
      <el-row>
        <div class="fz14 mt20"><span class="err">*</span>官方通道</div>
        <el-col :xl="10" :lg="10" :md="8" :sm="24" :xs="24">
          <el-form :model="channel" size="small" ref="channel">
            <table class="table">
              <thead>
                <tr>
                  <th colspan="1" rowspan="1">商户类型</th>
                  <th colspan="1" rowspan="1">微信</th>
                  <th colspan="1" rowspan="1">支付宝</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>普通（结算价）</td>
                  <td>
                    <el-form-item class='mb0' prop="p_wx_rate">
                      <el-input  class="w100" v-model="channel.p_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0" prop="p_ali_rate">
                      <el-input  class="w100" v-model="channel.p_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>绿洲/蓝海（返佣比例）</td>
                  <td>
                    <el-form-item class="mb0" prop="l_wx_rate">
                      <el-input  class="w100" v-model="channel.l_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0" prop="l_wx_rate">
                      <el-input  class="w100" v-model="channel.l_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>公益类（返佣比例）</td>
                  <td>
                    <el-form-item class="mb0" prop="g_wx_rate">
                      <el-input  class="w100" v-model="channel.g_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0" prop="g_ali_rate">
                      <el-input  class="w100" v-model="channel.g_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="fz14 mt20"><span class="err">*</span>网商通道</div>
        <el-col :xl="10" :lg="10" :md="8" :sm="24" :xs="24">
          <el-form :model="wsChannel" ref="wsChannel" size="small">
            <table class="table">
              <thead>
                <tr>
                  <th colspan="1" rowspan="1" >商户类型</th>
                  <th colspan="1" rowspan="1" >微信</th>
                  <th colspan="1" rowspan="1" >支付宝</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>普通（结算价）</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="wsChannel.p_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="wsChannel.p_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>绿洲/蓝海（返佣比例）</td>
                  <td>-</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="wsChannel.l_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="fz14 mt20"><span class="err">*</span>富民银行</div>
        <el-col :xl="10" :lg="10" :md="8" :sm="24" :xs="24">
          <el-form :model="fuChannel" size="small" ref="channel">
            <table class="table">
              <thead>
                <tr>
                  <th colspan="1" rowspan="1" >商户类型</th>
                  <th colspan="1" rowspan="1" >微信</th>
                  <th colspan="1" rowspan="1" >支付宝</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>普通（结算价）</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="fuChannel.p_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="fuChannel.p_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>绿洲/蓝海（返佣比例）</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="fuChannel.l_wx_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="fuChannel.l_ali_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="fz14 mt20"><span class="err">*</span>乐刷支付</div>
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-form :model="leChannel" size="small">
            <table class="table">
              <thead>
                <tr>
                  <th colspan="1" rowspan="3">交易类型</th>
                  <th colspan="1" rowspan="3">卡类型</th>
                  <th colspan="4">计算类型</th>
                </tr>
                <tr>
                  <th colspan="2">D+1</th>
                  <th colspan="2">D+0</th>
                </tr>
                <tr>
                  <th>≥1000元</th>
                  <th>&lt;1000元</th>
                  <th>≥1000元</th>
                  <th>&lt;1000元</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="3">POS机刷卡</td>
                  <td>借记卡</td>
                  <td colspan="2">
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="leChannel.pos_d1_j_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="leChannel.pos_d1_j_f"></el-input><span class="fz12">元封顶</span>
                    </el-form-item>
                  </td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.pos_d0_j_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>贷记卡</td>
                  <td colspan="2"> 
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.pos_d1_d_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.pos_d0_d_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>境外卡</td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.pos_d1_w_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.pos_d0_w_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td rowspan="2">银联二维码/闪付</td>
                  <td>借记卡</td>
                  <td>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="leChannel.yl_d1_j_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="leChannel.yl_d1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d1_j_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d0_j_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d0_j_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>贷记卡</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d1_d_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d1_d_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d0_d_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.yl_d0_d_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>扫码支付</td>
                  <td>微信/支付宝</td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.s_d1_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="leChannel.s_d0_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="fz14 mt20"><span class="err">*</span>新大陆</div>
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-form :model="xdlChannel" ref="xdlChannel" size="small">
            <table class="table">
              <thead>
                <tr>
                  <th rowspan="3">交易类型</th>
                  <th rowspan="3">卡类型</th>
                  <th colspan="2">结算类型</th>
                </tr>
                <tr>
                  <th colspan="2">T+1</th>
                </tr>
                <tr>
                  <th>≥1000元</th>
                  <th>&lt;1000元</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">POS机刷卡</td>
                  <td>借记卡</td>
                  <td colspan="2">
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="xdlChannel.pos_t1_j_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="xdlChannel.pos_t1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>贷记卡</td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="xdlChannel.pos_t1_d_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td rowspan="2">银联二维码/闪付</td>
                  <td>借记卡</td>
                  <td>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                    <el-form-item class="mb0 db">
                      <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>贷记卡</td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="xdlChannel.yl_t1_d_b1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="xdlChannel.yl_t1_d_s1000_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td>扫码支付</td>
                  <td>微信/支付宝</td>
                  <td colspan="2">
                    <el-form-item class="mb0">
                      <el-input  class="w100" v-model.number="xdlChannel.s_t1_rate" :maxlength="5"></el-input>%
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
    </el-row>
    <el-button type="primary" size="small" class="fr mt20" @click="submit">保存资料</el-button>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { init, sub } from '@/api/setting'

export default {
  name: 'ratesSetting',
  components: {
    Breadcrumb
  },
  data() {
    return {
      channel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: '',
        g_wx_rate: '',
        g_ali_rate: ''
      },
      wsChannel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_ali_rate: ''
      },
      fuChannel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: ''
      },
      fu_item: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: ''
      },
      leChannel: {
        pos_d1_j_rate: '',
        pos_d1_j_f: '',
        pos_d1_d_rate: '',
        pos_d1_w_rate: '',
        pos_d0_j_rate: '',
        pos_d0_d_rate: '',
        pos_d0_w_rate: '',
        yl_d1_j_b1000_rate: '',
        yl_d1_j_b1000_f: '',
        yl_d1_j_s1000_rate: '',
        yl_d0_j_b1000_rate: '',
        yl_d0_j_s1000_rate: '',
        yl_d1_d_b1000_rate: '',
        yl_d1_d_s1000_rate: '',
        yl_d0_d_b1000_rate: '',
        yl_d0_d_s1000_rate: '',
        s_d1_rate: '',
        s_d0_rate: ''
      },
      xdlChannel: {
        pos_t1_j_b1000_rate: '',
        pos_t1_j_s1000_rate: '',
        pos_t1_j_b1000_f: '',
        pos_t1_d_rate: '',
        yl_t1_j_b1000_rate: '',
        yl_t1_j_b1000_f: '',
        yl_t1_j_s1000_rate: '',
        yl_t1_d_b1000_rate: '',
        yl_t1_d_s1000_rate: '',
        s_t1_rate: ''
      }
    }
  },
  created() {
    init().then(res => {
      if (res.data.errorCode === 0) {
        this.channel.p_wx_rate = res.data.result.official.wx.normal
        this.channel.p_ali_rate = res.data.result.official.ali.normal
        this.channel.l_wx_rate = res.data.result.official.wx.green
        this.channel.l_ali_rate = res.data.result.official.ali.blue
        this.channel.g_wx_rate = res.data.result.official.wx.charity
        this.channel.g_ali_rate = res.data.result.official.wx.charity
        this.wsChannel.p_wx_rate = res.data.result.ws.wx.normal
        this.wsChannel.p_ali_rate = res.data.result.ws.ali.normal
        this.wsChannel.l_ali_rate = res.data.result.ws.ali.blue
        this.fuChannel.p_wx_rate = res.data.result.fumin.wx.normal
        this.fuChannel.p_ali_rate = res.data.result.fumin.ali.normal
        this.fuChannel.l_wx_rate = res.data.result.fumin.wx.green
        this.fuChannel.l_ali_rate = res.data.result.fumin.ali.blue
        this.leChannel.pos_d1_j_rate = res.data.result.lepos.lepos_swipe.debit.d1.rate
        this.leChannel.pos_d1_j_f = res.data.result.lepos.lepos_swipe.debit.d1.ceiling
        this.leChannel.pos_d1_d_rate = res.data.result.lepos.lepos_swipe.credit.d1.rate
        this.leChannel.pos_d1_w_rate = res.data.result.lepos.lepos_swipe.ovsea.d1.rate
        this.leChannel.pos_d0_j_rate = res.data.result.lepos.lepos_swipe.debit.d0.rate
        this.leChannel.pos_d0_d_rate = res.data.result.lepos.lepos_swipe.credit.d0.rate
        this.leChannel.pos_d0_w_rate = res.data.result.lepos.lepos_swipe.ovsea.d0.rate
        this.leChannel.yl_d1_j_b1000_rate = res.data.result.lepos.lepos_unipay.debit.d1.greater.rate
        this.leChannel.yl_d1_j_b1000_f = res.data.result.lepos.lepos_unipay.debit.d1.greater.ceiling
        this.leChannel.yl_d1_j_s1000_rate = res.data.result.lepos.lepos_unipay.debit.d1.less.rate
        this.leChannel.yl_d0_j_b1000_rate = res.data.result.lepos.lepos_unipay.debit.d0.greater.rate
        this.leChannel.yl_d0_j_s1000_rate = res.data.result.lepos.lepos_unipay.debit.d0.less.rate
        this.leChannel.yl_d1_d_b1000_rate = res.data.result.lepos.lepos_unipay.credit.d1.greater.rate
        this.leChannel.yl_d1_d_s1000_rate = res.data.result.lepos.lepos_unipay.credit.d1.less.rate
        this.leChannel.yl_d0_d_b1000_rate = res.data.result.lepos.lepos_unipay.credit.d0.greater.rate
        this.leChannel.yl_d0_d_s1000_rate = res.data.result.lepos.lepos_unipay.credit.d0.less.rate
        this.leChannel.s_d1_rate = res.data.result.lepos.lepos_mob.d1.rate
        this.leChannel.s_d0_rate = res.data.result.lepos.lepos_mob.d0.rate
        this.xdlChannel.pos_t1_j_b1000_rate = res.data.result.starpos.starpos_swipe.debit.t1.rate
        this.xdlChannel.pos_t1_j_b1000_f = res.data.result.starpos.starpos_swipe.debit.t1.ceiling
        // this.xdlChannel.pos_t1_j_s1000_rate = res.data.result.starpos.starpos_swipe.debit.t1.less.rate
        this.xdlChannel.pos_t1_d_rate = res.data.result.starpos.starpos_swipe.credit.t1.rate
        this.xdlChannel.yl_t1_j_b1000_rate = res.data.result.starpos.starpos_unipay.debit.t1.greater.rate
        this.xdlChannel.yl_t1_j_b1000_f = res.data.result.starpos.starpos_unipay.debit.t1.greater.ceiling
        this.xdlChannel.yl_t1_j_s1000_rate = res.data.result.starpos.starpos_unipay.debit.t1.less.rate
        this.xdlChannel.yl_t1_d_b1000_rate = res.data.result.starpos.starpos_unipay.credit.t1.greater.rate
        this.xdlChannel.yl_t1_d_s1000_rate = res.data.result.starpos.starpos_unipay.credit.t1.less.rate
        this.xdlChannel.s_t1_rate = res.data.result.starpos.starpos_mob.t1.rate
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  },
  methods: {
    submit() {
      sub(this.channel, this.wsChannel, this.fuChannel, this.leChannel, this.xdlChannel).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  }
}
</script>